<template>
  <div>
    <div class="app-container loadingDiv" v-loading="loading2"  >
      <el-form :model="wareTree" label-width="120px" label-position="left">
        <el-form-item label="是否轮播" >
          <el-switch
                  v-model="isCarouse"
                  active-color="#13ce66"
                  inactive-color="#dcdfe6">
          </el-switch>
        </el-form-item>
          <el-form-item label="全选/反选" >
            <el-checkbox v-model="checked" @change="checkedAll"/>
          </el-form-item>
        <!-- 树结构 -->
        <el-form-item label="">
          <el-tree
                  ref="tree"
                  :data="wareTree"
                  :props="defaultProps"
                  show-checkbox
                  node-key="id"
                  default-expand-all
                  highlight-current
                  style="margin-top: 20px"
          />
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
    import request from "../../src/lib/request";
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';

    export default {
        name: "createOrUpdate",
        props: {
            entpId: "",
            Authorization: '',
        },
      components: { },
      data() {
        return {
          listLoading: true,
          loading2:false, //加载中
          sortOptions: [{ label: 'ID Ascending', key: '+createTime' }, { label: 'ID Descending', key: '-createTime' }],
          statusOptions: ['published', 'draft', 'deleted'],
          isCarouse:true,
          checked:false, //checkbox的值
          wareTree: {
            id: 0,
            // checked: false,
            label: '',
            children: []
          },
          defaultProps: {
            children: 'children',
            label: 'label'
          },
            disabled:false,
        }
      },
      methods: {

         getTreeList(entpId,Authorization){
                 request('/api/v3/screen/whrMonitoer/queryWareHouseTree',{
                         flag: 4
                     },
                     entpId,Authorization).then(res => {
                     let resp = res
                     if (resp.code === 401) {
                         this.$message({
                             message: '会话过期，请重新登录！',
                             type: 'warning'
                         });
                         this.dialog_show = true;
                         return;
                     }
                     if(resp.code === 200){
                         this.wareTree = resp.data.children
                         var isCarouse =  JSON.parse(localStorage.getItem('isCarouse'));
                         if(isCarouse != null){
                             this.isCarouse = isCarouse;
                             if(isCarouse){
                                 let wareList =  JSON.parse(localStorage.getItem('wareList'));
                                 let checkedKeys =  JSON.parse(localStorage.getItem('checkedKeys'));
                                 const  routeNodes = this.recursionTree(this.wareTree,checkedKeys);
                                 this.$refs.tree.setCheckedKeys(routeNodes)
                             }else{
                                 let checkedKeys =  JSON.parse(localStorage.getItem('checkedKeys'));
                                 const  routeNodes = this.recursionTree(this.wareTree,checkedKeys);
                                 this.$refs.tree.setCheckedKeys(routeNodes)
                                 this.checked = true
                             }
                         }else{
                             this.isCarouse = true;
                             const routes = this.recursionAllTree(this.wareTree);
                             this.$refs.tree.setCheckedKeys(routes)
                             this.checked = true
                         }
                         let checkedNodes = this.$refs.tree.getCheckedNodes;
                         if(checkedNodes != null && checkedNodes.length > 0){
                             this.$nextTick(() => {
                                 this.$emit('disConfBtn',false);
                             })
                         }else{
                             this.$nextTick(() => {
                                 this.$emit('disConfBtn',true);
                             })
                         }
                     }else{
                         this.wareTree = {};
                     }
                 });
         },
         confirmTree(){
             let checkedNodes = this.$refs.tree.getCheckedNodes();
             let halfCheckedNodes = this.$refs.tree.getHalfCheckedNodes();
             checkedNodes = checkedNodes.concat(halfCheckedNodes)
             let wareList = [];
             if(checkedNodes != null && checkedNodes.length > 0){
                 for(var i = 0; i < checkedNodes.length; i++){
                     if(checkedNodes[i].level != null && checkedNodes[i].level === '0'){
                         let whList = []
                         for(var j = 0; j < checkedNodes.length; j++){
                             if(checkedNodes[j].parentId === checkedNodes[i].id){
                                 whList.push({'goodsPositionId':checkedNodes[j].id,'goodsPosition':checkedNodes[j].label});
                             }
                         }
                         wareList.push({'whId':checkedNodes[i].id,'whName':checkedNodes[i].label,'address':'','addr':'','whList':whList});
                         whList = []
                     }
                 }
             }else{
                 return {"code":400,"message":"请选择节点","data":[]};
             }

             let checkedKeys = this.$refs.tree.getCheckedKeys()
             let parentKeys = this.$refs.tree.getHalfCheckedKeys();
             // checkedKeys = checkedKeys.concat(parentKeys)
             console.log("checkedKeys",checkedKeys);
             console.log("checkedNodes",wareList);
             localStorage.setItem("isCarouse",JSON.stringify(this.isCarouse));
             localStorage.setItem("wareList",JSON.stringify(wareList));
             localStorage.setItem("checkedKeys",JSON.stringify(checkedKeys));

             if(this.isCarouse){
                 this.$nextTick(() => {
                     // this.$parent.rotation(wareList);
                     this.$emit('rotation',wareList);
                 })
             }else {
                 this.$nextTick(() => {
                     // this.$parent.endCarousel();
                     this.$emit('endCarousel',wareList);
                 })
             }

             return {"code":200,"message":"操作成功！","data":[]};
         },
          //全选/反选
          checkedAll(){
              if (this.checked) {
                  //全选
                  this.$refs.tree.setCheckedNodes(this.wareTree);
                  this.$nextTick(() => {
                      this.$emit('disConfBtn',false);
                  })
              }else{
                  //取消选中
                  this.$refs.tree.setCheckedKeys([]);
                  this.$nextTick(() => {
                      this.$emit('disConfBtn',true);
                  })
              }
          },

          // 遍历一级菜单
          recursionAllTree(doms) {
              // 通过 id 默认选中
              const res = []
              for (const route of doms) {
                  // if (route.checked === true) {
                  //     console.log('选中1：' + route.id)
                      res.push(route.id)
                  // }
                  if (route.hasChildren === true) {
                      this.recursionSecondAllTree(res, route.children)
                  }
              }
              // console.log(res)
              return res
          },
          // 遍历二级菜单，递归以后的菜单
          recursionSecondAllTree(res, routes) {
              for (const route1 of routes) {
                  // if (route1.checked === true) {
                  //     console.log('选中2：' + route1.id)
                      res.push(route1.id)
                  // }
                  if (route1.hasChildren === true) {
                      this.recursionSecondAllTree(res, route1.children)
                  }
              }
          },

          checkChange(data){
              console.log("选中节点:" + JSON.stringify(data))
          },


          // 遍历一级菜单
          recursionTree(doms,domIds) {
              // 通过 id 默认选中
              const res = []
              for (const route of doms) {
                  if (domIds.indexOf(route.id) != -1 ) {
                       res.push(route.id)
                  }
                  if (route.hasChildren === true) {
                      this.recursionSecondTree(res, domIds,route.children)
                  }
              }
              return res
          },
          // 遍历二级菜单，递归以后的菜单
          recursionSecondTree(res, domIds,routes) {
              for (const route1 of routes) {
                  if (domIds.indexOf(route1.id) != -1 ) {
                      res.push(route1.id)
                  }
                  if (route1.hasChildren === true) {
                      this.recursionSecondTree(res, domIds,route1.children)
                  }
              }
          },



        openFullScreen(text) {
              const loading = this.$loading({
                  lock: true,
                  text: text
              })
              return loading
          },
        // loading事件
        openLoadScreen(text) {
          const loading = this.$loading({
            lock: true,
            text: text,
            // target: document.querySelector('.loadingDivs5')
          })
          return loading
        },
      }
    }
</script>

<style scoped lang="scss">
  .el-tree{cursor:default;background:#fff;color:#5a5e66}.custom-theme .el-tree__empty-block{position:relative;min-height:60px;text-align:center;width:100%;height:100%}.custom-theme .el-tree__empty-text{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);color:#623615}.custom-theme .el-tree-node{white-space:nowrap}.custom-theme .el-tree-node__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:26px;cursor:pointer}.custom-theme .el-tree-node__content>.el-tree-node__expand-icon{padding:6px}.custom-theme .el-tree-node__content>.el-checkbox{margin-right:8px}.custom-theme .el-tree-node__content:hover{background-color:#f5f7fa}.custom-theme .el-tree-node__expand-icon{cursor:pointer;color:#b4bccc;font-size:12px;-webkit-transform:rotate(0);transform:rotate(0);-webkit-transition:-webkit-transform .3s ease-in-out;transition:-webkit-transform .3s ease-in-out;transition:transform .3s ease-in-out;transition:transform .3s ease-in-out,-webkit-transform .3s ease-in-out}.custom-theme .el-tree-node__expand-icon.expanded{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.custom-theme .el-tree-node__expand-icon.is-leaf{color:transparent;cursor:default}.custom-theme .el-tree-node__label{font-size:14px}.custom-theme .el-tree-node__loading-icon{margin-right:8px;font-size:14px;color:#b4bccc}.custom-theme .el-tree-node>.el-tree-node__children{overflow:hidden;background-color:transparent}.custom-theme .el-tree-node.is-expanded>.el-tree-node__children{display:block}.custom-theme .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{background-color:#eee}
</style>
